<template>
  <div class="box">
      <div class="footer">
          <ul>
              <router-link tag="li" to="/index">
          <i :class="url=='Index'?'iconfont icon-shouye active':'iconfont icon-shouye-copy '"></i>
          <!-- <img :src="url=='index'?'../../../static/common/img/home2.png':'../../../static/common/img/home1.png'" alt=""> -->
          <p :class="url=='Index'?'active':''">首页</p>
        </router-link>
        <router-link tag="li" to="/kind">
         <i :class="url=='kind'?'iconfont icon-fenlei active':'iconfont icon-fenlei'"></i>
          <!-- <img :src="url=='kind'?'https://wap.365msmk.com/img/course-active.cb51bc51.png':''" alt=""> -->
          <p :class="url=='kind'?'active':''">分类</p>
        </router-link>
        <router-link tag="li" to="/order">
         <i :class="url=='order'?'iconfont icon-icon-order active':'iconfont icon-icon-order'"></i>
          <!-- <img :src="url=='order'?'../../../static/common/img/cart2.png':'../../../static/common/img/cart1.png'" alt=""> -->
          <p :class="url=='order'?'active':''">订单</p>
        </router-link>
        <router-link tag="li" to="/my">
         <i :class="url=='my'?'iconfont icon-home active':'iconfont icon-home'"></i>
          <!-- <img class="img4" :src="url=='my'?'../../../static/common/img/my2.png':'../../../static/common/img/my1.png'" alt=""> -->
          <p :class="url=='my'?'active':''">我的</p>
        </router-link>
          </ul>
      </div>
  </div> 
</template>
<script>
export default {
  data(){
          return {url:""}
      },
      mounted() {
        this.url=this.$route.name
      },
      watch:{
          '$route.name'(val){
            this.url=val
          }
      }
}
</script>

<style lang="scss" scoped>
    .iconfont{
      font-size:0.5rem;
    }
    .icon-fenlei{
      font-size: 0.5rem;
    }
   
    .footer{
        font-size: 0.2rem;
        height: 1rem;
        // border: 1px solid #000;
        background: white;
        box-shadow:0 0 10px rgba(0, 0, 0, 0.3) ;
        &>ul{
             display: flex;
            justify-content: space-around;
            height: 1rem;
            align-items: center;
             li{
                 text-align: center;
                
             }
        }
    }
    .active{
        color: red;
        font-weight: 700;
    }
</style>
